  
<!--
父组件参数定义写法:  
  <navbar
    :vaniconL="true"  左边 true vant框架图标 false 阿里巴巴字体图标
    :vaniconR="true"  右边 true vant框架图标 false 阿里巴巴字体图标
    iconNameL="arrow-left" 左图标名
    iconNameR="search" 右图标名
    @clickLeft="clickLeft" 左点击
    @clickRight="clickRight" 右点击
    bgcolor="bgcolor" 背景颜色
    color="color" 字体颜色
  ></navbar>
参数：
-->
<template>
  <div class="navbox" @touchmove.prevent>
    <div class="title" :style="{background:bgcolor,color:color,backgroundImage:bgImage}">
      <div class="box">
       <div @click="clickLeft" class="iconDiv">
          <van-icon
          v-if="vaniconL"
          :class="noLeft ? 'transparents':''"
          :name="iconNameL"
          size="18"
         
        />
        <span v-else class="icon" :class="[{'transparents':noLeft},iconNameL]" ></span>
        返回
       </div>
        <span class="text">
          <slot></slot>
        </span>
        <div class="iconDiv"> 
          <van-icon
          v-if="vaniconR"
          :class="noRight ? 'transparents':''"
          :name="iconNameR"
          size="18"
          @click="clickRight"
        />
        <slot v-else-if="rightSlot" name="rightSlot"></slot>
        <span v-else class="icon" :class="[{'transparents':noRight},iconNameR]" @click="clickRight"></span>
        </div>
      </div>
    </div>
    <!-- <div style="height:0.45rem;content:''"></div> -->
  </div>
</template>

<script>
export default {
  name: "navbar",
  props: ["vaniconL", "vaniconR", "bgcolor", "color", "iconNameL", "iconNameR","noRight","noLeft","bgImage","rightSlot"],
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    clickLeft() {
      this.$emit("clickLeft");
    },
    clickRight() {
      this.$emit("clickRight");
    }
  },
  created() {},
  mounted() {},
  destroyed() {}
};
</script>
<style lang='scss' scoped>
.navbox {
  position: relative;
  height: 0.45rem;
  & .title {
    z-index: 10;
    width: 100%;
    height: 0.45rem;
    position: relative;
    top: 0;
    background: #4775d9;
    background-image: linear-gradient(211deg, #5d5cbf 0%, #4775d9 100%);
    color: #fff;
    padding: 0 0.10rem;
    box-sizing: border-box;
    & .box {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      & .text {
        font-size: .14rem;
      }
      & .icon {
        display: inline-block;
        font-style: 18px;
        height: 0.45rem;
        line-height: 0.45rem;
      }
      & .van-icon {
        height: 0.45rem;
        line-height: 0.45rem;
      }
    }
  }
}
.transparents {
  color: transparent;
}
.iconDiv{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.14rem;
    width: 0.5rem;
}
</style>